<template>
    <div class="article-add-container">
        <h2 style="margin-bottom: 20px;">添加新文章</h2>
        <!-- 添加文章表单 -->
        <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="100px" class="add-form">
            <el-form-item label="文章标题" prop="title">
                <el-input v-model="addForm.title" placeholder="请输入文章标题" style="width: 80%;" maxlength="100"
                ></el-input>
            </el-form-item>
            <el-form-item label="文章内容" prop="content">
                <el-input v-model="addForm.content" type="textarea" rows="12" placeholder="请输入文章内容" style="width: 80%;"
                    maxlength="2000"></el-input>
            </el-form-item>
            <!-- 可扩展：新增作者、分类、状态等字段 -->
            <el-form-item label="文章分类" prop="categoryId">
                <el-select v-model="addForm.categoryId" placeholder="请选择分类" style="width: 80%;">
                    <el-option v-for="item in categoryList" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <!-- 提交/取消按钮 -->
            <el-form-item>
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleSubmit">提交添加</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios'

// 复用文章相关请求实例（或直接引入DashboardApi.js中的adminRequest）
const articleRequest = axios.create({
    baseURL: 'http://47.104.167.34:9110/api/admin',
    timeout: 5000,
    headers: { 'Content-Type': 'application/json' }
})

// 请求拦截器：添加token
articleRequest.interceptors.request.use(
    config => {
        const token = localStorage.getItem('adminToken')
        if (token) config.headers.Authorization = `Bearer ${token}`
        return config
    },
    error => Promise.reject(error)
)

export default {
    name: 'ArticleAdd',
    data() {
        return {
            // 添加表单数据
            addForm: {
                title: '', // 文章标题
                content: '', // 文章内容
                categoryId: '' // 文章分类（示例扩展字段）
            },
            // 表单验证规则
            addRules: {
                title: [
                    { required: true, message: '请输入文章标题', trigger: 'blur' },
                    { min: 2, max: 100, message: '标题长度需在2-100字符之间', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入文章内容', trigger: 'blur' },
                    { min: 10, message: '内容长度不能少于10字符', trigger: 'blur' }
                ],
                categoryId: [
                    { required: true, message: '请选择文章分类', trigger: 'change' }
                ]
            },
            // 分类列表（示例：从接口获取）
            categoryList: []
        }
    },
    mounted() {
        // 页面加载时获取分类列表（按需调用）
        this.getCategoryList()
    },
    methods: {
        // 1. 获取分类列表（示例接口，需替换为实际接口）
        async getCategoryList() {
            try {
                const res = await articleRequest.post('/category/list')
                this.categoryList = res.data.list || []
            } catch (err) {
                console.error('获取分类列表失败：', err)
                this.$message.error('分类加载失败，请重试')
            }
        },

        // 2. 提交添加文章
        async handleSubmit() {
            // 表单验证
            this.$refs.addFormRef.validate(async (isValid) => {
                if (!isValid) return // 验证失败则终止

                try {
                    // 调用添加文章接口（替换为实际接口）
                    await articleRequest.post('/article/add', this.addForm)
                    this.$message.success('文章添加成功！')
                    // 提交成功后返回列表页
                    this.$router.push('/article/manage')
                } catch (err) {
                    console.error('添加文章失败：', err)
                    this.$message.error(err.response?.data?.msg || '添加失败，请重试')
                }
            })
        },

        // 3. 取消添加（返回列表页）
        handleCancel() {
            this.$router.go(-1) // 或直接跳转列表页路径
        }
    }
}
</script>

<style scoped>
.article-add-container {
    padding: 20px;
}

.add-form {
    padding: 10px 0;
}
</style>